<template>
  <view class="history_container app_container_page">
    <pullRefreshView class="pullRefreshHistoryView" ref="pullRefreshHistoryView" :fetchFn="fetchHistoryList">
      <template v-slot:default="{ list }">
        <appVideoListCard v-for="video in list" :key="video.id" :video="video" @VIDEOLIST_CARD_CLICK="toVideoDetail" class="collectionCard" />
      </template>
    </pullRefreshView>
  </view>
</template>

<script>
import { myBrowseHistory } from '@/api/user.js'
import pullRefreshView from '@/components/app/pull-refresh-view.vue'
import appVideoListCard from '@/components/app/app_videoList_card'

export default {
  components: {
    pullRefreshView,
    appVideoListCard
  },
  methods: {
    fetchHistoryList(params) {
      return myBrowseHistory({
        ...params
      })
    },
    toVideoDetail(val) {
      uni.navigateTo({
        url: '/pages/videoDetail/index?id=' + val.id
      })
    }
  },
  onPullDownRefresh() {
    this.$refs.pullRefreshHistoryView.fetchList(true).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    this.$refs.pullRefreshHistoryView.fetchList()
  }
}
</script>

<style lang="scss">
.history_container {
  padding: 30rpx 30rpx 0 30rpx;
  width: 100%;
  height: 100%;
  app-video-list-card ~ app-video-list-card {
    margin-top: 30rpx;
  }
}
</style>
